<template>
	<view class="container">
		<tui-navigation-bar :isFixed="true" :isOpacity="false" splitLine :zIndex="99999" :scrollTop="0" title="" backgroundColor="#fff" color="#333">
			<view style="height: 40px;display: flex;align-items: center;">
				<view style="width: 15rpx;" @click="handleBack"></view>
				<image v-if="share" @click="handleToIndex" src="https://static.wddzq.com/static/shouye-xuanzhong.png" style="width: 30rpx;height: 30rpx;padding: 15rpx;background-color: #f2f2f2;border: 2rpx solid #ddd;border-radius: 50%;" />
				<u-icon v-else name="arrow-left" size="45" color="#333" @click="handleBack"></u-icon>
				<view style="width: 10rpx"></view>
				<image mode="aspectFill" class="active-boss-img" style="width: 58rpx;height: 58rpx;" @click="toUserPersonal(detail.createUser.userId)" :src="detail?.createUser?.headPic"></image>
				<view style="width: 10rpx"></view>
				<text style="font-size: 28rpx;color: #333;" @click="toUserPersonal(detail.createUser.userId)">{{detail?.createUser?.nickname}}</text>
			</view>
		</tui-navigation-bar>
		<view :style="{height: headerHeight + 'px'}"></view>

		<u-swiper
			v-if="(detail.picListV2?.split('|') || []).length >= 1"
			:autoplay="false"
			@change="handleSwiperChange"
			@click="handleSwiperClick"
			:list="detail.picListV2?.split('|') || []"
			:height="images[current]?.height || 422"
			:current="current"
			indicatorMode="dot"
			indicatorActiveColor="#FFB803"
			:indicator="true"
			indicatorStyle="bottom: 50rpx"
		></u-swiper>
		<u-swiper
			v-else
			:autoplay="false"
			indicatorMode="dot"
			@change="handleSwiperChange"
			@click="handleSwiperClick"
			:list="detail.picListV2?.split('|') || []"
			:height="images[current]?.height || 422"
			:current="current"
		></u-swiper>
		<image style="display: none;" v-for="(item, index) in detail.picListV2?.split('|') || []" :src="item" :data-index="index" @load="handleLoadImage"></image>
		<!-- 活动信息 -->
		<view class="active-item-top mb-18 br">
			<view class="active-item-bg" v-if="detail.chargeType === 1">
				<!-- <image src="https://static.wddzq.com/static/jiagebeijing.png"></image> -->
				<view class="active-item-right-text-price">￥{{detail.priceShow}}</view>
				<view style="font-size: 24rpx;color: #fff;" >起/每人</view>
			</view>
      <view class="active-item-bg" v-if="detail.chargeType === 2">
        <!-- <image src="https://static.wddzq.com/static/jiagebeijing.png"></image> -->
        <view class="active-item-right-text-price" style="margin-top: 44rpx;">{{detail.priceShow}}</view>
      </view>
			<view class="active-item-right">
				<view style="margin-bottom: 18rpx;">
          <tui-tag backgroundColor="#FFFFE6" color="#999"  shape="circle">
            <image style="width: 26rpx;height: 26rpx;margin-right: 4rpx;" :src="detail.categoryIcon"></image>
            <text class="tab-item-text">{{detail.categoryName}}</text>
          </tui-tag>&nbsp;
          <tui-tag backgroundColor="#FAE7DC" color="#F28C54" type="" shape="circle" v-if="detail.discountType == 1">
						<image style="width: 1rpx;height: 26rpx;"></image>
						女生优惠
					</tui-tag>&nbsp;
          <tui-tag backgroundColor="#E5F1FF" color="#0074FC" type="" shape="circle" v-if="detail.payWay == 1" >
						<image style="width: 1rpx;height: 26rpx;;"></image>
						线上支付
					</tui-tag>
          <tui-tag backgroundColor="#E5F1FF" color="#0074FC" type="" shape="circle" v-if="detail.payWay == 2" >
						<image style="width: 1rpx;height: 26rpx;;"></image>
						线下收费
					</tui-tag>

				</view>
				<view class="active-item-right-text">
					<view>{{detail.title}}</view>
					<!-- <view>
						<text class="active-item-right-text-unit">¥</text><text class="active-item-right-text-price">{{detail.priceShow}}</text>
					</view> -->
				</view>
				<view class="active-time">
<!--					<tui-icon name="time" size="12" color="#000"></tui-icon>-->
          <!-- <image style="width: 28rpx;height: 28rpx;" src="https://static.wddzq.com/static/huodongshijian_detail.png"></image> -->
					<text>&nbsp;活动时间&nbsp;{{detail.dateShow}}</text>
				</view>
        <view class="active-addr" style="margin-top: 16rpx;">
          <!-- <image style="width: 28rpx;height: 28rpx;" src="https://static.wddzq.com/static/huodongxingshi_detail.png"></image> -->
          <text v-if="detail.formType === 1">&nbsp;活动形式：&nbsp;不限男女</text>
          <text v-if="detail.formType === 2">&nbsp;活动形式：&nbsp;仅限女生参加</text>
          <text v-if="detail.formType === 3">&nbsp;活动形式：&nbsp;仅限男生参加</text>
<!--          <text v-if="detail.formType === 4">&nbsp;活动形式：&nbsp;限{{detail.maxManCount}}男{{detail.maxWomanCount}}女参加</text>-->
          <text v-if="detail.formType === 4">&nbsp;活动形式：&nbsp;剩余{{detail.leaveManCount}}男{{detail.leaveWomanCount}}女可参加</text>
        </view>

				<view class="active-addr">
<!--					<tui-icon name="gps" size="12" color="#000"></tui-icon>-->
          <!-- <image style="width: 28rpx;height: 28rpx;" src="https://static.wddzq.com/static/huodongdidian_detail.png"></image> -->
					<text v-if="detail.distanceShow">&nbsp;{{detail.distanceShow}}&nbsp;&nbsp;|&nbsp;&nbsp;</text>
					<text>&nbsp;{{detail.locationName}}</text>
					<view style="flex: 1;text-align: right;" @click="handleMapLocation">
						<image style="width: 50rpx;height: 50rpx" src="https://static.wddzq.com/static/daohangtubiao.png"></image>
					</view>
				</view>
			</view>
		</view>

    <!--    活动套餐-->
    <view v-if="detail.merchantProductVO" class="active-item-wrapper" @click="navigateToPack">
      <view class="active-header-wrapper">
        <image class="header-title-icon" src="/static/detail/team.png"/>
        <text class="header-title">活动套餐</text>
      </view>

      <view class="active-content-wrapper">
        <image class="content-image" :src="detail.merchantProductVO.productPic"/>
        <view class="active-content-text-wrapper">
          <text class="content-text-title">{{detail.merchantProductVO.productName}}</text>
          <text class="content-text-des">点击查看详情</text>
          <view class="content-text-widget-wrapper">
            <view class="content-text-price-wrapper">
              <text class="content-text-price-icon">¥</text>
              <text class="content-text-price">{{detail.merchantProductVO.price}}</text>
            </view>
            <view class="content-text-icon">补贴价</view>
            <text class="content-text-original-price">¥{{detail.merchantProductVO.originalPrice}}</text>
          </view>
        </view>
      </view>
    </view>

		<!-- 报名人数 -->
		<view class="active-member p-22 mb-18 br">
			<view class="active-header" style="margin-bottom: 24rpx;" @click="handleListOpen">
				<text class="title" style="margin-bottom: 0;">报名人数</text>
				<view class="active-number">
					<text>仅剩{{ detail.maxSignUpCount - detail.signUpCount }}个名额</text>
					<tui-icon name="arrowright" color="#333" size="20"></tui-icon>
				</view>
			</view>
			<view class="active-images">
				<view class="active-images-item" v-for="item in (detail?.userSignUpVoList || [])" @click="toUserPersonal(item.userId)">
					<image class="active-image-avator" :src="item.headPic"  mode="aspectFill"></image>
					<image v-if="item.gender === 1" class="active-image-sex" style="background-color: #E5F1FF;" src="https://static.wddzq.com/static/nan.png"></image>
					<image v-if="item.gender === 2" class="active-image-sex" style="background-color: #FFB3AE;" src="https://static.wddzq.com/static/nv.png"></image>
				</view>
			</view>
		</view>
		<!-- 组织者 -->
		<view class="box p-22 mb-18">
			<view class="title">组织者</view>
			<view class="active-boss">
				<view style="position: relative;width: 96rpx;height: 102rpx;display: flex;align-items: center;justify-content: center;">
					<image  mode="aspectFill" class="active-boss-img" @click="toUserPersonal(detail?.createUser?.userId)" :src="detail?.createUser?.headPic"></image>
					<image v-if="detail?.createUser?.vipOrNot" style="position: absolute;top:0;left: 0;width: 96rpx;height: 102rpx;" src="https://static.wddzq.com/static/V3/shequtouxiangkuang.png" />
				</view>
				<view class="active-boss-info" @click="toUserPersonal(detail.createUser.userId)">
					<text class="active-boss-name">{{detail?.createUser?.nickname}}</text>
					<view>
						<image v-if="detail?.createUser?.authenticationType === 1" src="https://static.wddzq.com/static/gerenrenzheng.png"></image>
						<image v-else-if="detail?.createUser?.authenticationType === 2" src="https://static.wddzq.com/static/juleburenzheng-big.png"></image>
						<image v-else src="https://static.wddzq.com/static/huiyuan-moren.png"></image>
						<text v-if="detail?.createUser?.authenticationType === 1">{{detail?.createUser?.authenticationJobName}}</text>
						<text v-else-if="detail?.createUser?.authenticationType === 2">{{detail?.createUser?.authenticationClubName}}</text>
						<text v-else>未认证</text>
					</view>
				</view>
				<view class="active-lx" @click="clickCreateUserWechat">
					<image src="https://static.wddzq.com/static/weixin.png"></image>
					<text>微信</text>
				</view>
				<view class="active-lx" @click="clickCreateUserPhone">
					<image src="https://static.wddzq.com/static/Group254.png"></image>
					<text>电话</text>
				</view>
			</view>
		</view>

		<!-- 退款规则 -->
<!--		<view class="box p-22 mb-18">
			<view class="title">退款规则</view>
			<view class="content" v-if="detail.cancelFreeTypeDesc">该活动有无责取消申明,在 {{ detail.cancelFreeTypeDesc }} 前可以无责取消, 超过时间, 将不可取消</view>
			<view class="content" v-if="!detail.cancelFreeTypeDesc">该活动报名后不可取消</view>
		</view>-->
<!--    <view class="box p-22 mb-18">
      <view class="title">隐私政策</view>
      <view class="content">这里是一段隐私政策文字内容。这里是一段退款规则描述性文字内容</view>
    </view>-->

    <view class="box p-22 mb-18">
      <view class="title">活动描述</view>
      <view class="content" style="white-space:pre-wrap;">{{ detail.describeContent?.replace(/\↵/g, '\n') }}</view>
      <view class="content" v-if="detail.describePic"><image :src="detail.describePic" mode="widthFix"></image></view>

    </view>

		<view style="height: 150rpx;"></view>

		<view class="active-bottom">
<!--      <image class="chat-btn" src="/static/detail/message-icon.png"/>-->
			<view class="share-box">
				<!--  open-type="share" -->
				<button class="share-box-btn" @click="handleShareClick"></button>
				<image src="https://static.wddzq.com/static/fenxiang.png"></image>
			</view>
      <u-button v-if="detail.status === 50 && detail.signUpStatus == 1" class="share-btn" customStyle="display: flex; flex-direction: column; height: 88rpx; border-radius: 72rpx;background-color: #aaa;" color="#fff">
        <view class="share-btn-bm">已取消</view>
      </u-button>
      <u-button v-else-if="(detail.status === 20 || detail.status === 30 || detail.status === 40) && detail.signUpStatus == 1" class="share-btn" customStyle="display: flex; flex-direction: column; height: 88rpx; border-radius: 72rpx;background-color: #aaa;" color="#fff">
        <view class="share-btn-bm">已截止</view>
      </u-button>
      <u-button v-else-if="detail.signUpStatus == 2" class="share-btn" customStyle="width: 486rpx; margin: 0; display: flex; flex-direction: column; height: 88rpx; border-radius: 72rpx;background-color: #aaa;" color="#fff">
        <view class="share-btn-bm">报名成功</view>
      </u-button>
      <u-button v-else-if="detail.signUpStatus == 3" @click="handleSubmit" class="share-btn" customStyle="display: flex; flex-direction: column; height: 88rpx; border-radius: 72rpx;background-color: #aaa;" color="#fff">
        <view class="share-btn-bm">重新报名</view>
      </u-button>
      <u-button v-else-if="detail.signUpStatus == 1" class="share-btn" @click="handleSubmit" customStyle="width: 486rpx; display: flex; flex-direction: column; height: 88rpx; border-radius: 88rpx;margin: 0;" color="#1c1c1e">
        <view class="share-btn-bm" v-if="detail.chargeType === 2">立即报名</view>
        <view class="share-btn-bm" v-if="detail.chargeType === 1">立即报名(¥{{ detail.priceShow }})</view>
        <view class="share-btn-yh" v-if="detail.discountType === 1 && detail.discountedPrice">女生优惠 -{{ detail.discountedPrice }}</view>
      </u-button>
		</view>

		<u-popup :show="listShow" :round="18" @close="handleListClose">
			<view style="position: relative;">
				<view class="popup-title">仅剩 {{ detail.maxSignUpCount - detail.signUpCount }} 个名额</view>
				<view class="popup-close" @click="handleListClose">
					<u-icon name="close" size="28"></u-icon>
				</view>
				<view class="member-list">
					<view class="member-item" v-for="item in (detail?.userSignUpVoList || [])">
						<image :src="item.headPic" @click="toUserPersonal(item.userId)"></image>
						<view class="member-box">
							<view class="member-content">
								<view class="member-title" @click="toUserPersonal(item.userId)">{{ item.nickname }}</view>
								<image v-if="item.gender === 1" style="background-color: #E5F1FF;" src="https://static.wddzq.com/static/nan.png"></image>
								<image v-if="item.gender === 2" style="background-color: #FFB3AE;" src="https://static.wddzq.com/static/nv.png"></image>
								<view v-if="detail?.myActivity" class="member-concat">
									<view class="active-lx" @click="handleOpenActiveWechat(item)">
										<image style="width: 50rpx;height: 50rpx" src="https://static.wddzq.com/static/weixin.png"></image>
									</view>
									<view class="active-lx" @click="handleOpenActivePhone(item)">
										<image style="width: 50rpx;height: 50rpx" src="https://static.wddzq.com/static/Group254.png"></image>
									</view>
								</view>
							</view>
							<text class="member-desc">{{ item.signature }}</text>
						</view>
					</view>
				</view>
			</view>
		</u-popup>

		<u-modal :show="showPhone" :showConfirmButton="false">
			<view class="slot-content" style="position: relative;width: 100%;">
				<view class="modal-close" @click="handleClosePhone">
					<u-icon name="close" size="28"></u-icon>
				</view>
				<image class="modal-img" src="https://static.wddzq.com/static/shezhigerenxinxichatu.png"></image>
				<view class="modal-title">手机号</view>
				<view class="modal-content">
					请拨打联系人手机号
				</view>
				<view class="modal-phone">
					<view class="phone-number">{{this.detail?.createUser?.phone}}</view>
					<text>联系人手机号</text>
				</view>
				<view style="padding: 0 24rpx;">
					<u-button customStyle="height: 72rpx;border-radius: 44rpx;margin-top: 64rpx;" color="#1c1c1e" text="拨打电话" @click="handleCallPhone"></u-button>
				</view>
			</view>
		</u-modal>

		<u-modal :show="showWechat" :showConfirmButton="false">
			<view class="slot-content" style="position: relative;width: 100%;">
				<view class="modal-close" @click="handleCloseWechat">
					<u-icon name="close" size="28"></u-icon>
				</view>
				<image class="modal-img" src="https://static.wddzq.com/static/shezhigerenxinxichatu.png"></image>
				<view class="modal-title">微信号</view>
				<view class="modal-content">
					请添加联系人微信
				</view>
				<view class="modal-phone">
					<view class="phone-number">{{this.detail?.createUser?.wechat}}</view>
					<text>联系人微信号</text>
				</view>
				<view style="padding: 0 24rpx;">
					<u-button customStyle="height: 88rpx;border-radius: 44rpx;margin-top: 64rpx;" color="#1c1c1e" text="复制" @click="handleCopyWechat"></u-button>
				</view>
			</view>
		</u-modal>

		<u-modal :show="showActivePhone" :showConfirmButton="false">
			<view class="slot-content" style="position: relative;width: 100%;">
				<view class="modal-close" @click="handleCloseActivePhone">
					<u-icon name="close" size="28"></u-icon>
				</view>
				<image class="modal-img" src="https://static.wddzq.com/static/shezhigerenxinxichatu.png"></image>
				<view class="modal-title">手机号</view>
				<view class="modal-content">
					请拨打联系人手机号
				</view>
				<view class="modal-phone">
					<view class="phone-number">{{this.currentPerson?.phone}}</view>
					<text>联系人手机号</text>
				</view>
				<view style="padding: 0 24rpx;">
					<u-button customStyle="height: 72rpx;border-radius: 44rpx;margin-top: 64rpx;" color="#1c1c1e" text="拨打电话" @click="handleCallActivePhone"></u-button>
				</view>
			</view>
		</u-modal>

		<u-modal :show="showActiveWechat" :showConfirmButton="false">
			<view class="slot-content" style="position: relative;width: 100%;">
				<view class="modal-close" @click="handleCloseActiveWechat">
					<u-icon name="close" size="28"></u-icon>
				</view>
				<image class="modal-img" src="https://static.wddzq.com/static/shezhigerenxinxichatu.png"></image>
				<view class="modal-title">微信号</view>
				<view class="modal-content">
					请添加联系人微信
				</view>
				<view class="modal-phone">
					<view class="phone-number">{{this.currentPerson?.wecaht}}</view>
					<text>联系人微信号</text>
				</view>
				<view style="padding: 0 24rpx;">
					<u-button customStyle="height: 88rpx;border-radius: 44rpx;margin-top: 64rpx;" color="#1c1c1e" text="复制" @click="handleCopyActiveWechat"></u-button>
				</view>
			</view>
		</u-modal>

		<u-popup :show="showSharePopup" :round="18" @close="handleShareClose">
			<view style="position: relative;">
				<view class="popup-title">分享朋友圈</view>
				<view class="popup-close" @click="handleShareClose">
					<u-icon name="close" size="28"></u-icon>
				</view>
				<view class="share-list">
					<view class="share-item">
						<button class="share-box-btn" open-type="share"></button>
						<image src="https://static.wddzq.com/static/qr.png" />
						<view>分享页面</view>
					</view>
					<view class="share-item" @click="handleShareImgClick">
						<image src="https://static.wddzq.com/static/wechat.png" />
						<view>生成二维码</view>
					</view>
					<!-- <view class="share-item">
						<image src="https://static.wddzq.com/static/copy.png" />
						<view>复制报名信息</view>
					</view> -->
				</view>
				<view class="share-content">
					<view class="share-title">从以下模板选择图片分享</view>
					<view class="share-temp">
						<view class="share-temp-item" @click="handleCheckClick">
							<image class="share-temp-img" src="https://static.wddzq.com/static/temp_one.png"></image>
							<view>简约</view>
							<image style="width: 36rpx;height: 36rpx;position: absolute;right: 20rpx;bottom: 20rpx;" :src="checked ? 'https://static.wddzq.com/static/check_y.png' : 'https://static.wddzq.com/static/check_b.png'"></image>
						</view>
						<!-- <view class="share-temp-item">
							<image class="share-temp-img" src="../../static/second/temp_two.png"></image>
							<view>经典</view>
						</view>
						<view class="share-temp-item">
							<image class="share-temp-img" src="../../static/second/temp_three.png"></image>
							<view>潮流</view>
						</view> -->
					</view>
				</view>
			</view>
		</u-popup>

		<u-popup :show="showShareImg" :round="18" @close="handleShareImgClose">
			<canvas canvas-id="myCanvas" style="width: 600px;height:855px; position: fixed;top: -10000px;"></canvas>
			<view style="position: relative;">
				<image @longpress="saveShareImg(canvasToTempFilePath)" style="width: 500rpx;height: 713rpx;position: absolute;left: 50%;margin-left: -250rpx;top: -750rpx;" :src="canvasToTempFilePath"></image>
			</view>
			<!-- <view style="display: flex;align-items: center;justify-content: center;background-color: #f2f2f2;">
				<view  style="margin-top: 30rpx;">
					<text style="font-size: 32rpx;color: #666">保存图片</text>
				</view>
			</view> -->
			<view style="background-color: #fff;border-top-right-radius: 18rpx;border-top-left-radius: 18rpx;">
				<view @click="saveShareImg(canvasToTempFilePath)" style="height: 100rpx;line-height: 100rpx;text-align: center;font-size: 32rpx;color: #333;">保存图片</view>
				<view @click="handleShareImgClose" style="height: 100rpx;line-height: 100rpx;text-align: center;font-size: 32rpx;color: #999;">取消</view>
			</view>
		</u-popup>

		<tui-cinfo-header :refresh="refresh"></tui-cinfo-header>
	</view>
</template>

<script>
	import { getActivityDetail, userSignUpActivity } from '../../config/api.js';
	import { to, isLogin, getUserInfoDetail, getSystemInfo, pxToRpx } from '../../config/utils.js';

	export default {
		data() {
			return {
				current: 0,
				params: '',
				listShow: false,
				showPhone: false,
        showWechat: false,
				showActiveWechat: false,
				showActivePhone: false,
				detail: {},
				currentPerson: {},
				images: [],
				refresh: 0,
				share: false,
				headerHeight: 64,
				showSharePopup: false,
				showShareImg: false,
				checked: true,

				// canvas
				ratio: 1,
				ctx: null, // 创建canvas对象
				canvasToTempFilePath: null, // 保存最终生成的导出的图片地址
				openStatus: true, // 声明一个全局变量判断是否授权保存到相册
				share_qrcode_flag: false,
			}
		},
		onLoad(params) {
			console.log(params);
			this.params = params;

			let system = getSystemInfo();
			if(system) {
				this.headerHeight = 44 + (system.statusBarHeight || 20);
			}
		},
		onShow() {
			this.fetchActivityDetail();
		},
		onReady() {
			let pages = getCurrentPages();
			if(pages.length <= 1) {
				this.share = true;
			}
		},
		onShareAppMessage() {
      // this.onShareAppMessage()
			// const promise = new Promise(resolve => {
			// 	setTimeout(() => {
			// 		resolve({
			// 			title: '自定义转发标题'
			// 		})
			// 	}, 2000)
			// })
			return {
				title: this.detail?.title + '-' + this.detail?.describeContent,
			  path: `/pages/detail/detail?activityId=${this.detail?.id}`,
			  imageUrl: this.detail?.picFirst,
			};
		},
		methods: {
      navigateToPack(){
        const productId = this?.detail?.merchantProductVO?.id;
        if(!productId){
          return uni.showToast({
            title: 'id不存在',
            icon: 'error'
          });
        } else {
          uni.navigateTo({
            url: `/pages/pack/pack?productId=${productId}`
          })
        }
      },
			/**
			 * 绘制图片
			 */
			//获取图片信息
			downloadFileImg(url) {
				return new Promise(resolve => {
					uni.getImageInfo({
						src: url,
						success: res => {
							resolve(res.path);
						},
						fail: err => {
							console.log(err);
							uni.showToast({
								title: '网络错误请重试',
								icon: 'loading'
							});
						}
					});
				});
			},

			handleCheckClick() {
				this.checked = !this.checked;
			},
			// 生成海报
			async createCanvasImage(data) {
				if(this.canvasToTempFilePath) return;
				// 点击生成海报数据埋点
				if (!this.ctx) {
					uni.showLoading({
						title: '生成中...'
					});
					let code = this.downloadFileImg(data.erCodeUrl);
					let poster = this.downloadFileImg(data.picFirst);
					let address = this.downloadFileImg('https://static.wddzq.com/static/huodongdidian_detail.png')
					let date = this.downloadFileImg('https://static.wddzq.com/static/huodongshijian_detail.png')
					let bgUrl = '';
					if (data.bgUrl) {
						bgUrl = new Promise(resolve => {
							uni.downloadFile({
								//生成临时地址
								url: data.bgUrl,
								success: res => {
									resolve(res.tempFilePath);
								},
								fail: erros => {
									uni.showToast({
										title: '网络错误请重试',
										icon: 'loading'
									});
								}
							});
						});
					}
					Promise.all([code, poster, address, date, bgUrl]).then(result => {
						const ctx = uni.createCanvasContext('myCanvas', this);
						let canvasWidth = 600,
							canvasHeight = 855 * this.ratio,
							canvasWidthPx = 600 * this.ratio,
							canvasHeightPx = 855 * this.ratio,
							codeurl_width = 130, //绘制的二维码宽度
							codeurl_heigth = 130, //绘制的二维码高度
							codeurl_x = 446, //绘制的二维码在画布上的位置
							codeurl_y = 677, //绘制的二维码在画布上的位置
							coverurl_width = 546, //绘制的封面宽度
							coverurl_heigth = 551, //绘制的封面高度
							coverurl_x = 24, //绘制的封面在画布上的位置
							coverurl_y = 34, //绘制的封面在画布上的位置
							padding_top = 34,	// 顶部内边距
							padding_lr = 24;

						if (data.bgUrl) {
							ctx.drawImage(result[3], 0, 0, canvasWidth, canvasHeight); // 背景图片需要本地
						} else {
							//绘制圆角矩形
							ctx.save();
							ctx.translate(0, 0);
							//绘制圆角矩形的各个边
							this.drawRoundRectPath(ctx, canvasWidth, canvasHeight, 14);
							ctx.fillStyle = data.fillStyle || '#fff'; //若是给定了值就用给定的值否则给予默认值
							ctx.fill();
							ctx.restore();
						}

						ctx.save(); // 先保存状态 已便于画完圆再用
						ctx.beginPath(); //开始绘制
						ctx.setFillStyle('#333333');
						if (data.title) {
							this.dealWords({
								ctx: ctx, //画布上下文
								fontSize: 36, //字体大小
								word: data.title, //需要处理的文字
								maxWidth: 500, //一行文字最大宽度
								x: padding_lr, //文字在x轴要显示的位置
								y: padding_top + coverurl_heigth + 20, //文字在y轴要显示的位置
								maxLine: 2 //文字最多显示的行数
							});
						}

						ctx.font = 'normal normal 24px sans-serif';
						ctx.setFillStyle('#666666'); // 文字颜色
						this.dealWords({
							ctx: ctx, //画布上下文
							fontSize: 24, //字体大小
							word: data?.distanceShow + ' | ' + data?.locationName, //需要处理的文字
							maxWidth: 400, //一行文字最大宽度
							x: padding_lr + 24 + 10, //文字在x轴要显示的位置
							y: padding_top + coverurl_heigth + 20 + 20 + 20 + 35, //文字在y轴要显示的位置
							maxLine: 1 //文字最多显示的行数
						});

						this.dealWords({
							ctx: ctx, //画布上下文
							fontSize: 24, //字体大小
							word: data.dateShow, //需要处理的文字
							maxWidth: 400, //一行文字最大宽度
							x: padding_lr + 24 + 10, //文字在x轴要显示的位置
							y: padding_top + coverurl_heigth + 20 + 20 + 20 + 35 + 50, //文字在y轴要显示的位置
							maxLine: 1 //文字最多显示的行数
						});

						// 地址图标
						ctx.drawImage(result[2], padding_lr, padding_top + coverurl_heigth + 20 + 20 + 20 + 35 + 15, 29, 29); // 绘制封面
						// 时间图标
						ctx.drawImage(result[3], padding_lr, padding_top + coverurl_heigth + 20 + 20 + 20 + 35 + 50 + 15, 27, 29); // 绘制封面

						// 绘制封面
						this.circleImgTwo(ctx, result[1], coverurl_x, coverurl_y, coverurl_width, coverurl_heigth, 16);
						// ctx.drawImage(result[2], coverurl_x, coverurl_y, coverurl_width, coverurl_heigth); // 绘制封面

						// 绘制二维码
						ctx.drawImage(result[0], codeurl_x, codeurl_y, codeurl_width, codeurl_heigth); // 绘制封面

						ctx.draw(false, () => {
							// canvas画布转成图片并返回图片地址
							uni.canvasToTempFilePath(
								{
									canvasId: 'myCanvas',
									width: canvasWidth,
									height: canvasHeight,
									destWidth: canvasWidth,
									destHeight: canvasHeight,
									success: res => {
										this.canvasToTempFilePath = res.tempFilePath;
										this.showShareImg = true;
										uni.showToast({
											title: '绘制成功'
										});
									},
									fail: err => {
										uni.showToast({
											title: '绘制失败'
										});
									},
									complete: () => {
										uni.hideLoading();
										uni.hideToast();
									}
								},
								this
							);
						});
					});
				}
			},

			drawRoundRectPath(cxt, width, height, radius) {
				cxt.beginPath(0);
				//从右下角顺时针绘制, 弧度从0到1/2PI
				cxt.arc(width - radius, height - radius, radius, 0, Math.PI / 2);

				//矩形下边线
				cxt.lineTo(radius, height);

				//左下角圆弧, 弧度从1/2PI到PI
				cxt.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);

				//矩形左边线
				cxt.lineTo(0, radius);

				//左上角圆弧, 弧度从PI到3/2PI
				cxt.arc(radius, radius, radius, Math.PI, (Math.PI * 3) / 2);

				//上边线
				cxt.lineTo(width - radius, 0);

				//右上角圆弧
				cxt.arc(width - radius, radius, radius, (Math.PI * 3) / 2, Math.PI * 2);

				//右边线
				cxt.lineTo(width, height - radius);
				cxt.closePath();
			},

			circleImgTwo(ctx, img,x, y, w,h,r) {// 画一个图形
				if (w<2*r) r=w/2;if (h< 2*r) r=h/ 2;
				ctx.save();
				ctx.beginPath();
				ctx.moveTo(x + r, y);
				ctx.arcTo(x + w, y, x + w, y + h,r);
				ctx.arcTo(x + w, y + h,x,y + h,r);
				ctx.arcTo(x, y + h, x, y, r);
				ctx.arcTo(x, y, x +w, y, r);
				ctx.closePath();
				ctx.strokeStyle ='#FFFFFF'; // 设置绘制圆形边框的颜色ctx.stroke();
				ctx.clip();
				ctx.drawImage(img, x, y, w, h);
				ctx.restore();
			},
			//处理文字多出省略号显示
			dealWords(options) {
				options.ctx.setFontSize(options.fontSize); //设置字体大小
				let allRow = Math.ceil(options.ctx.measureText(options.word).width / options.maxWidth); //实际总共能分多少行
				let count = allRow >= options.maxLine ? options.maxLine : allRow; //实际能分多少行与设置的最大显示行数比, 谁小就用谁做循环次数
				let endPos = 0; //当前字符串的截断点
				for (let j = 0; j < count; j++) {
					let nowStr = options.word.slice(endPos); //当前剩余的字符串
					let rowWid = 0; //每一行当前宽度
					if (options.ctx.measureText(nowStr).width > options.maxWidth) {
						//如果当前的字符串宽度大于最大宽度, 然后开始截取
						for (let m = 0; m < nowStr.length; m++) {
							rowWid += options.ctx.measureText(nowStr[m]).width; //当前字符串总宽度
							if (rowWid > options.maxWidth) {
								if (j === options.maxLine - 1) {
									//如果是最后一行
									options.ctx.fillText(nowStr.slice(0, m - 1) + '...', options.x, options.y + (j + 1) * 40); //(j+1)*18这是每一行的高度
								} else {
									options.ctx.fillText(nowStr.slice(0, m), options.x, options.y + (j + 1) * 40);
								}
								endPos += m; //下次截断点
								break;
							}
						}
					} else {
						//如果当前的字符串宽度小于最大宽度就直接输出
						options.ctx.fillText(nowStr.slice(0), options.x, options.y + (j + 1) * 40);
					}
				}
			},

			// 保存到系统相册
			saveShareImg(canvasToTempFilePath) {
				uni.saveImageToPhotosAlbum({
					filePath: canvasToTempFilePath,
					success: () => {
						uni.showToast({
							title: '保存成功, 快去分享到朋友圈吧~',
							icon: 'none'
						})
						// this.$u.toast('保存成功, 快去分享到朋友圈吧~');
					},
					fail: () => {
						// this.$u.toast('保存失败~');
						uni.showToast({
							title: '保存失败~',
							icon: 'none'
						})
					}
				});
			},

			handleToIndex() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			handleBack() {
				uni.navigateBack();
			},
			handleShareClick() {
				this.showSharePopup = true;
			},
			handleShareClose() {
				this.showSharePopup = false;
			},
			handleShareImgClick() {
				if(!this.checked) {
					return uni.showToast({
						title: '请先选择模板!'
					})
				}
				this.showShareImg = true;
				this.handleShareClose();
				this.createCanvasImage(this.detail);
			},
			handleShareImgClose() {
				this.showShareImg = false;
			},
      onShareAppMessage(){
        const promise = new Promise(resolve => {
          setTimeout(() => {
            resolve({
              title: detail?.title + detail?.describeContent,
              path: `pages/detail/detail?activityId=${detail?.id}`,
              imageUrl: detail?.picFirst,
            })
          }, 2000)
        })


        return {
          title: detail?.title + detail?.describeContent,
          path: `pages/detail/detail?activityId=${detail?.id}`,
          imageUrl: detail?.picFirst,
          promise
        };
        // uni.share({
        // 	provider: 'weixin',
        // 	scene: "WXSceneSession",
        // 	type: 5,
        // 	imageUrl: data?.data?.picFirst,
        // 	title: data?.data?.title,
        // 	miniProgram: {
        // 			id: data?.data?.id,
        // 			path: `pages/detail/detail?activityId=${data?.data?.id}`,
        // 			type: 0,
        // 			// webUrl: 'http://uniapp.dcloud.io'
        // 	},
        // 	success: ret => {
        // 			console.log(JSON.stringify(ret));
        // 	}
        // });
      },
		  toUserPersonal(userId){
        uni.navigateTo({
          url: `/pages/personal/personal?userId=` + userId
        })
      },
			handleLoadImage(e) {
				const { detail, currentTarget } = e;
				const { width, height } = detail || {};
				const { index } = currentTarget.dataset || {};
				let system = getSystemInfo();
				const { screenHeight, screenWidth } = system || {};
				if(screenWidth) {
					let _width = screenWidth;
					let _height = screenWidth * height / width;
					this.images[index] = {
						width: _width,
						height: pxToRpx(_height)
					};

				}
				console.log(width, height, index, this.images);
			},
			handleSwiperChange(e) {
				this.current = e.current;

			},
			handleSwiperClick(index) {
				uni.previewImage({
					current: index,
					urls: this.detail?.picListV2?.split('|') || []
				})
			},
      clickCreateUserWechat(){
        if(this.detail.signUpStatus == 2){

					this.handleOpenWechat();
        }else {
          uni.showToast({
            title: "报名成功后查看",
            icon: 'error'
          });
        }

      },
      clickCreateUserPhone(){
        if(this.detail.signUpStatus == 2) {
					this.handleOpenPhone();
        }else {
          uni.showToast({
            title: "报名成功后查看",
            icon: 'error'
          });
        }
      },
			handleListOpen() {
				this.listShow = true;
			},
			handleListClose() {
				this.listShow = false;
			},
			async fetchActivityDetail() {
				const [err, data] = await to(getActivityDetail({ activityId: this.params?.activityId }));
				if(err) {
					return uni.showToast({
						title: err?.msg || '获取活动详情失败',
						icon: 'error'
					});
				}
				if(data.success) {
					this.detail = data?.data || {};
				} else {
					return uni.showToast({
						title: data?.msg || '获取活动详情失败',
						icon: 'error'
					});
				}
			},

			// 报名
			async handleSubmit() {
				if(!isLogin()) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return;
				}
				if (this.detail.signUpCount >= this.detail.maxSignUpCount) {
          return uni.showToast({
            title: '报名人数已满',
            icon: "none"
          })
        }
				let userInfo = getUserInfoDetail();
				if(!userInfo?.nickname || !userInfo?.gender) {
					this.refresh = Math.random();
					return;
				}

				uni.navigateTo({
					url: `/pages/application/application?id=${this.detail.id}`
				})

			},
			handleOpenWechat() {
				this.showWechat = true;
			},
			handleCloseWechat() {
				this.showWechat = false;
			},
			handleClosePhone() {
				this.showPhone = false;
			},
			handleOpenPhone() {
				this.showPhone = true;
			},

			handleOpenActiveWechat(item) {
				this.currentPerson = item;
				this.showActiveWechat = true;
			},
			handleCloseActiveWechat() {
				this.showActiveWechat = false;
			},
			handleCloseActivePhone() {
				this.showActivePhone = false;
			},
			handleOpenActivePhone(item) {
				this.currentPerson = item;
				this.showActivePhone = true;
			},

			handleCallPhone() {
				if(!this.detail?.createUser?.phone) {
					return uni.showToast({
						title: '未获取到手机号',
						icon: "none"
					})
				}
				uni.makePhoneCall({
					phoneNumber: this.detail?.createUser?.phone
				});
			},
			handleCopyWechat() {
				if(!this.detail?.createUser?.wechat) {
					return uni.showToast({
						title: '未获取到微信号',
						icon: "none"
					})
				}
				uni.setClipboardData({
					data: this.detail?.createUser?.wechat,
					success: function () {
						uni.showToast({
							title: '复制成功',
							icon: "none"
						})
					}
				});
			},
			handleCallActivePhone() {
				if(!this.currentPerson?.phone) {
					return uni.showToast({
						title: '未获取到手机号',
						icon: "none"
					})
				}
				uni.makePhoneCall({
					phoneNumber: this.currentPerson?.phone
				});
			},
			handleCopyActiveWechat() {
				if(!this.currentPerson?.wecaht) {
					return uni.showToast({
						title: '未获取到微信号',
						icon: "none"
					})
				}
				uni.setClipboardData({
					data: this.currentPerson?.wecaht,
					success: function () {
						uni.showToast({
							title: '复制成功',
							icon: "none"
						})
					}
				});
			},
			handleMapLocation() {
        uni.openLocation({
          latitude: this.detail.latitude,
          longitude: this.detail.longitude,
          address: this.detail.address,
          name: this.detail.locationName
        })
			},
		}
	}
</script>

<style>
	.br {
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
	}
	.m-24 {
		margin: 24rpx;
	}
	.mb-18 {
		margin-bottom: 18rpx;
	}
	.p-22 {
		padding: 22rpx;
	}
	.active-item-top {
		padding: 34rpx 22rpx 24rpx 22rpx;
		background-color: #fff;
		margin-top: -30rpx;
		border-radius: 18rpx;
		position: relative;
		z-index: 1000;
	}
	.active-item-bg {
		position: absolute;
		top: -55rpx;
		right: 0;
		width: 152rpx;
		height: 152rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-size: 100% 100%;
		background-image: url('https://static.wddzq.com/static/jiagebeijing.png');
	}
	.active-item-header {
		width: 200rpx;
		height: 200rpx;
		border-radius: 20rpx;
	}
	.active-item-right {
		margin-left: 18rpx;
	}
	.active-item-right-text {
		font-size: 32rpx;
		color: #000;
		margin-bottom: 12rpx;
		display: flex;
		justify-content: space-between;
	}
	.active-item-right-text-unit {
		font-size: 36rpx;
		color: #fff;
		font-weight: bold;
		margin-top: 10rpx;
	}
	.active-item-right-text-price {
		font-size: 36rpx;
		color: #fff;
		font-weight: bold;
		margin-top: 28rpx;
	}
	.active-addr {
		/* margin-top: 12rpx; */
	}

	.active-addr, .active-time{
		font-size: 24rpx;
		color: #666;
		display: flex;
		align-items: center;
	}

  .active-item-wrapper{
    background: white;
    border-radius: 16rpx;
    padding: 32rpx;
    margin-bottom: 16rpx;
  }

  .active-header-wrapper{
    display: flex;
    justify-content: left;
    align-items: center;
    padding-bottom: 32rpx;
    border-bottom: 1rpx solid #eee;
  }

  .header-title-icon{
    width: 32rpx;
    height: 32rpx;
    margin-right: 8rpx;
  }

  .header-title{
    font-size: 28rpx;
    font-weight: bold;
    color: #333;
  }

  .active-content-wrapper{
    display: flex;
    padding-top: 32rpx;
  }

  .content-image{
    width: 140rpx;
    height: 140rpx;
    background: white;
    border-radius: 16rpx;
    margin-right: 16rpx;
  }

  .active-content-text-wrapper{
    display: flex;
    flex-direction: column;
    width: 530rpx;
  }

  .content-text-title{
    font-size: 26rpx;
    font-weight: bold;
    color: #333;
  }

  .content-text-des{
    font-size: 24rpx;
    font-weight: 400;
    color: #999;
    margin-top: 16rpx;
    margin-bottom: 18rpx;
  }

  .content-text-widget-wrapper{
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .content-text-price-wrapper{
    display: flex;
    align-items: baseline;
    margin-right: 4rpx;
  }
  .content-text-price-icon{
    font-size: 22rpx;
    font-weight: 600;
    color: #FF8F1F;
  }
  .content-text-price{
    font-size: 34rpx;
    font-weight: 600;
    color: #FF8F1F;
  }
  .content-text-icon{
    background: rgba(255,143,31,0.1);
    border-radius: 8rpx;
    border: 1rpx solid rgba(255,143,31,0.3);
    padding: 0 8rpx;
    font-size: 20rpx;
    font-weight: 500;
    color: #FF8F1F;
    height: 34rpx;
    line-height: 34rpx;
    margin-right: 8rpx;
  }
  .content-text-original-price{
    font-size: 26rpx;
    font-weight: 400;
    color: #AAAAAA;
    text-decoration: line-through;
  }

	.active-member {
		background-color: #fff;
		border-radius: 18rpx;
	}
	.active-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.active-number {
		display: flex;
		align-items: center;
	}
	.active-number text {
		font-size: 28rpx;
		color: #FFB803;
		margin-right: 20rpx;
	}
	.active-images {
		width: 100%;
		display: flex;
		overflow-x: auto;
	}
	.active-images-item {
		position: relative;
		margin-right: 44rpx;
	}
	.active-image-avator {
		width: 80rpx;
		height: 80rpx;
		border-radius: 80rpx;
	}
	.active-image-sex {
		position: absolute;
		right: 0rpx;
		bottom: 4rpx;
		width: 30rpx;
		height: 30rpx;
		border-radius: 30rpx;
		border: 3rpx solid #fff;
	}

	.box {
		background-color: #fff;
	}
	.title {
		font-weight: bold;
		font-size: 28rpx;
		color: #000;
		margin-bottom: 24rpx;
	}
	.content {
		font-size: 28rpx;
		color: #666;
	}

	.content image {
		width: 100%;
	}

	.active-boss {
		display: flex;
		align-items: center;
	}
	.active-boss-img {
		width: 86rpx;
		height: 86rpx;
		border-radius: 43rpx;
	}
	.active-boss-info {
		flex: 1;
		margin-left: 12rpx;
	}
	.active-boss-name {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 18rpx;
	}
	.active-boss-info view {
		display: flex;
		align-items: center;
	}
	.active-boss-info view image {
		width: 32rpx;
		height: 32rpx;
		margin-right: 8rpx;
	}
	.active-boss-info view text {
		font-size: 24rpx;
		color: #333;
	}

	.active-lx {
		margin-left: 36rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.active-lx image {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50rpx;
		margin-bottom: 12rpx;
	}
	.active-lx text {
		font-size: 24rpx;
		color: #333;
	}

	.active-bottom {
		display: flex;
    justify-content: space-between;
		padding-left: 64rpx;
		padding-right: 48rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		background-color: #fff;
		padding: 30rpx 48rpx;
		box-sizing: border-box;
		box-shadow: 0rpx -4rpx 4rpx 0rpx rgba(0,0,0,0.02);
		z-index: 1000;
	}
  .chat-btn{
    margin: auto 0;
    width: 44rpx;
    height: 44rpx;
  }
	.share-box {
		display: flex;
		flex-direction: column;
    margin: auto 0;
	}
	.share-box image {
		width: 44rpx;
		height: 44rpx;
	}
	.share-box text {
		font-size: 24rpx;
		color: #666;
	}
	.share-box-btn {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
	}
	.share-btn {
		//flex: 1;
	}
	.share-btn-bm {
    margin-left: 60rpx;
    margin-right: 60rpx;
		font-size: 28rpx;
		color: #fff;
	}
	.share-btn-yh {
		font-size: 20rpx;
		color: #FFB803;
	}

	/* 参加人员列表 */
	.popup-title {
		display: flex;
		justify-content: center;
		font-size: 28rpx;
		color: #222;
		margin-top: 48rpx;
		margin-bottom: 58rpx;
	}

	/* 弹窗 */
	.popup-close {
		position: absolute;
		top: 0;
		right: 0;
		width: 80rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.member-list {
		padding: 24rpx;
		max-height: 500rpx;
		overflow: auto;
	}
	.member-item {
		display: flex;
		align-items: center;
		margin-bottom: 54rpx;
	}
	.member-item > image {
		width: 86rpx;
		height: 86rpx;
		border-radius: 43rpx;
		margin-right: 12rpx;
	}
	.member-item .member-content {
		display: flex;
		align-items: center;
	}
	.member-box {
	}
	.member-content .member-title {
		font-size: 28rpx;
		color: #333;
		margin-right: 12rpx;
	}
	.member-content image {
		width: 28rpx;
		height: 28rpx;
	}
	.member-content .member-concat {
		flex: 1;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.member-desc {
		font-size: 24rpx;
		color: #aaa;
	}


/* 弹窗 */
.modal-close {
	position: absolute;
	top: -60rpx;
	right: -60rpx;
	width: 80rpx;
	height: 80rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.modal-img {
	position: absolute;
	top: -250rpx;
	left: 0;
	width: 200rpx;
	height: 250rpx;
}
.modal-title {
	font-size: 28rpx;
	text-align: center;
	font-weight: bold;
	color: #000;
}
.modal-content{
	font-size: 28rpx;
	text-align: center;
	color: #666;
	margin-top: 48rpx;
	margin-bottom: 32rpx;
}
.modal-phone {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.phone-number {
	display: flex;
	justify-content: center;
	font-size: 48rpx;
	color: #333;
}
.modal-phone text {
	font-size: 24rpx;
	color: #666;
}
.share-list {
	display: flex;
	align-items: center;
	justify-content: space-around;
	margin-top: 40rpx;
	margin-bottom: 48rpx;
}
.share-item {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
.share-item image {
	width: 124rpx;
	height: 124rpx;
}
.share-item view {
	margin-top: 28rpx;
	height: 28rpx;
	font-size: 28rpx;
	font-weight: 400;
	color: #333333;
	line-height: 28rpx;
}

.share-content {
	background-color: #f2f2f2;
}
.share-title {
	height: 28rpx;
	font-size: 28rpx;
	font-weight: 400;
	color: #666666;
	line-height: 28rpx;
	text-align: center;
	padding-top: 36rpx;
	padding-bottom: 32rpx;
}
.share-temp {
	display: flex;
	justify-content: center;
	padding-bottom: 72rpx;
}
.share-temp-item {
	position: relative;
}
.share-temp-item view {
	text-align: center;
	height: 40rpx;
	font-size: 28rpx;
	font-weight: 400;
	color: #666666;
	line-height: 33rpx;
}
.share-temp .share-temp-img {
	width: 202rpx;
	height: 288rpx;
	margin-right: 26rpx;
}
.share-temp image:last-child {
	margin-right: 0;
}

</style>
